
<template>
  <div class="trackBox">
    <div class="map" v-loading="loading">
      <div id="groundMap" style="width:100%;height:100%;"></div>
    </div>
  </div>
</template>
<script>
// import BMap from 'BMap'
import carUrl from '@/assets/images/ground/carIcon/car.png'
import startUrl from '@/assets/images/ground/carIcon/start.png'
import endUrl from '@/assets/images/ground/carIcon/end.png'
export default {
   props: ['rise', 'end', 'childMsg'],
  data () {
    return {
      mapData: [],
      loading: false,
      plateNumber: this.childMsg,
      startTime: this.groundStartTime,
      endTime: this.groundEndTime
    }
  },
  mounted () {
    this.initMap()
  },
 
  methods: {
    search_step2 () {
      this.initMap()
      console.log(rise,end,999999)
  
      this.getMapPoint()
    },
    getMapPoint () {
      var _this = this
      _this.creatMap(getMapData)
      
    },
    initMap () {
      var map = new BMap.Map('groundMap')
      // map.centerAndZoom('武汉', 7)
      map.centerAndZoom(new BMap.Point(108.37, 22.82), 11);
      map.enableScrollWheelZoom(true)
      window.map = map
      this.addMapControl()
    },
    addMapControl () {
      // eslint-disable-next-line
      var ctrlNav = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
      })
      window.map.addControl(ctrlNav) // 向地图中添加缩放控件
      var ctrlSca = new BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_BOTTOM_LEFT })
      window.map.addControl(ctrlSca) // 向地图中添加比例尺控件
    },
    creatMap (pointsArr) {
      var points = []
      var mapData = pointsArr
      for (var i = 0; i < mapData.length; i++) {
        var p1 = mapData[i].latitudeDegree
        var p2 = mapData[i].longitudeDegree
        points.push(new BMap.Point(p2, p1))
      }
      var first = points[0]
      var last = points[points.length - 1]
      window.map.clearOverlays()
      var polyline = new BMap.Polyline(points, {
        enableEditing: false, // 是否启用线编辑，默认为false
        enableClicking: true, // 是否响应点击事件，默认为true
        strokeWeight: '5', // 折线的宽度，以像素为单位
        strokeOpacity: 0.8, // 折线的透明度，取值范围0 - 1
        strokeColor: '#18a45b' // 折线颜色
      })
      window.map.panTo(last)
      window.map.centerAndZoom('', 8)
      window.map.addOverlay(polyline) // 增加折线

      var carIcon = new BMap.Icon(carUrl, new BMap.Size(82, -25))
      var startIcon = new BMap.Icon(startUrl, new BMap.Size(27, 27))
      var endIcon = new BMap.Icon(endUrl, new BMap.Size(27, 27))
      var car1 = new BMap.Marker(first, { icon: carIcon }) // 创建标注
      var car2 = new BMap.Marker(last, { icon: carIcon }) // 创建标注
      var start = new BMap.Marker(first, { icon: startIcon }) // 创建标注
      var end = new BMap.Marker(last, { icon: endIcon }) // 创建标注
      window.map.addOverlay(car1)
      window.map.addOverlay(car2)
      window.map.addOverlay(start)
      window.map.addOverlay(end)

      this.loading = false
    },
  }
}
</script>
<style lang='scss' scoped>
.searchWrapper {
  position: absolute;
  z-index: 99999999999;
  left: 5%;
  top: 10%;
}
.trackBox {
  width: 100%;
  height: 100%;
}
.map {
  height: 100%;
  z-index: 999 !important;
}
#groundMap {
  z-index: 2 !important;
}
@import "@/assets/css/transportRight.scss";
.searchEara {
  float: left;
}
.search {
  border: none;
}
ul.table {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.table li:first-child {
  border-left: 1px solid #ccc;
}
ul.table li {
  float: left;
  width: 25%;
  font-size: 1.4rem;
  border-right: 1px solid #ccc;
  line-height: 40px;
  height: 40px;
  text-align: center;
}
.table1 {
  background-color: #434343;
  color: #fff;
  margin-bottom: none;
}
</style>
